import React, { Component } from 'react';
import { Table, Button, Tag, Popconfirm, message } from 'antd';
import { findAllShopApi, updateStatusApi } from '../../../apis/gen/genAPI';
import Detail from '../../../components/shopManage/Detail.jsx';
import Alert from '../../../components/shopManage/Alert';
import Search from '../../../components/shopManage/Search';
import Test from '../../../components/shopManage/test';

export default class ShopManage extends Component {
  state = {
    data: [],
    selectedRowKeys: [],
    visible: false, //详情模态框
    visibleAlert: false, //警告模态
    details: {},
  };
  componentDidMount() {
    this.findAllShop();
  }
  findAllShop = async (data) => {
    const res = await findAllShopApi(data);
    if (res.status == 200) {
      this.setState(
        {
          data: res.data.rows,
        },
        // () => {
        //   console.log(this.state.data);
        //   for (let i = 0; i < this.state.data.length; i++) {
        //     data[i].key = i
        //   }
        // }
      );
    }
    // console.log(res);
  };
  onSelectChange = (selectedRowKeys) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };
  toDetail = (e) => {
    this.setState(
      {
        details: e,
        visible: true,
      },
      () => {
        console.log(this.state.details);
      },
    );
  };
  closeModal = () => {
    this.setState({
      visible: false,
    });
  };
  toAlert = () => {
    this.setState({
      visibleAlert: true,
    });
  };
  closeAlert = () => {
    this.setState({
      visibleAlert: false,
    });
  };
  updateStatus = async (data) => {
    const res = await updateStatusApi(data);
    if (res.status == 200) {
      message.success('更新成功');
      this.findAllShop();
    }
    console.log(res);
  };
  updateSta = (value) => {
    this.updateStatus({ id: value.id, status: '2' });
    console.log(value);
  };
  cancel = (e) => {
    console.log(e);
    message.error('已取消');
  };
  searchData = (data) => {
    // console.log('123');
    this.findAllShop(data);
  };
  render() {
    const { selectedRowKeys, data } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const columns = [
      {
        title: '商铺名称',
        key: 'shopName',
        dataIndex: 'shopName',
      },
      {
        title: '信誉积分',
        key: 'prestige',
        dataIndex: 'prestige',
      },
      {
        title: '商铺状态',
        key: 'status',
        dataIndex: 'status',
        okText: '确认',
        render: (tags) => (
          <>
            {tags == 1 ? (
              <Tag
                style={{
                  color: '#13c2c2',
                  backgroundColor: '#e6fffb',
                  padding: '0px 7px',
                  border: '1px solid #13c2c2',
                }}
                key={tags}
              >
                启用
              </Tag>
            ) : (
              tags
            )}
          </>
        ),
        filters: [
          {
            text: '启用',
            value: 1,
          },
          {
            text: '停用',
            value: 0,
          },
        ],
        onFilter: (value, record) => record.status == value,
      },
      {
        title: '电话',
        key: 'telephone',
        dataIndex: 'telephone',
      },
      {
        title: '商铺类型',
        key: 'type',
        dataIndex: 'type',
        render: (tags) => (
          <>
            {tags ? (
              <Tag
                style={{
                  color: '#52c41a',
                  backgroundColor: '#f6ffed',
                  padding: '0px 7px',
                  border: '1px solid #52c41a',
                }}
                color="#f6ffed"
                key={tags}
              >
                商铺
              </Tag>
            ) : (
              <Tag
                style={{
                  color: '#13c2c2',
                  backgroundColor: '#e6fffb',
                  padding: '0px 7px',
                  border: '1px solid #13c2c2',
                }}
                key={tags}
              >
                充电站
              </Tag>
            )}
          </>
        ),
        filters: [
          {
            text: '商铺',
            value: 0,
          },
          {
            text: '充电站',
            value: 1,
          },
        ],
        onFilter: (value, record) => record.type == value,
      },

      {
        title: '门店详情',
        key: '4',
        fixed: 'right',
        width: 100,
        render: (tags) => <a onClick={() => this.toDetail(tags)}>查看详情</a>,
      },
      {
        title: '警告详情',
        key: 'operation',
        fixed: '5',
        width: 100,
        render: (tags) => <a onClick={() => this.toAlert(tags)}>查看警告</a>,
      },
      ,
      {
        title: '警告',
        key: '6',
        fixed: 'right',
        width: 100,
        render: () => <Button type="dashed">警告</Button>,
      },
      {
        title: '下架',
        key: '7',
        fixed: 'right',
        width: 100,
        render: (tag) => (
          <>
            <Popconfirm
              title={tag.status ? '确认要下架吗' : '确认要上架吗'}
              onConfirm={() => this.updateSta(tag)}
              onCancel={this.cancel}
              okText="确认"
              cancelText="取消"
            >
              <Button type="primary">{tag.status ? '停用' : '启用'}</Button>,
              {/* <a href="#">Delete</a> */}
            </Popconfirm>
          </>
        ),
      },
    ];

    return (
      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
        <Search searchData={this.searchData}></Search>
        {/* <Test></Test> */}
        <Table
          pagination={{
            defaultCurrent: 1,
            defaultPageSize: 5,
            pageSizeOptions: [5, 10],
            showSizeChanger: true,
          }}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          onChange={this.onChange}
        />
        {this.state.visible ? (
          <Detail
            visible={this.state.visible}
            closeModal={this.closeModal}
            details={this.state.details}
          ></Detail>
        ) : null}
        <Alert
          visibleAlert={this.state.visibleAlert}
          closeAlert={this.closeAlert}
        ></Alert>
      </div>
    );
  }
}
